<template>
    <section class="content">
    
<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" >
				<el-form-item>
                    <span>开始时间:</span>  <el-date-picker  v-model="value1"   type="date" placeholder="选择日期">
                    </el-date-picker>
                    <span>结束时间:</span>  <el-date-picker  v-model="value2"   type="date" placeholder="选择日期">
                    </el-date-picker>
                    <span>状态:</span><el-select v-model="value3" clearable placeholder="请选择">
                    <el-option v-for="item in options3" :key="item.value3" :label="item.label3" :value="item.value3">
                    </el-option>
                            </el-select>
                     <span>项目名称:</span><el-select v-model="value4" clearable placeholder="请选择">
                    <el-option v-for="item in options4" :key="item.value4" :label="item.label4" :value="item.value4">
                    </el-option>
                            </el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" >查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

        <el-col :span="24">
        <el-table :data="tableData" stripe highlight-current-row  class="table">

            <el-table-column prop="data" label="创建日期"> </el-table-column>
            <el-table-column prop="name" label="文件名称"> </el-table-column>
            <el-table-column prop="operation" label="操作" > 
                <template slot-scope="scope">
                <el-button  type="primary" @click="dialogFormVisible = true">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="项目信息" :visible.sync="dialogFormVisible" :modal='false'>
        <el-form :model="form">
            <el-form-item :label-width="formLabelWidth" label="项目名称：">
                <el-input v-model="form.name" placeholder="请输入内容" class="input-w-480"></el-input>
            </el-form-item>
             <el-form-item label="项目创建者：" :label-width="formLabelWidth">
                 <el-input v-model="form.username" placeholder="请输入内容"  class="input-w-480"></el-input>
            </el-form-item>
             <el-form-item label="项目状态：" :label-width="formLabelWidth">
                <el-select v-model="form.value1" clearable placeholder="请选择">
                    <el-option v-for="item in formoptions" :key="item.formvalue" :label="item.formlabel" :value="item.formvalue">
                    </el-option>
                </el-select>
                <span>项目类型：</span>
                <el-select v-model="form.value2" clearable placeholder="请选择">
                    <el-option v-for="item in formoptions1" :key="item.formvalue1" :label="item.formlabel1" :value="item.formvalue1">
                    </el-option>
                </el-select>
            </el-form-item>
              <el-form-item label="创建时间："  :label-width="formLabelWidth">
                 <el-date-picker  v-model="form.value"   type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="开始时间：" :label-width="formLabelWidth">
                 <el-date-picker  v-model="form.startdata"   type="date" placeholder="选择日期"></el-date-picker>
                <span>结束时间：</span>
                 <el-date-picker  v-model="form.enddata"   type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
           <el-form-item label="项目成员：" :label-width="formLabelWidth">
               <!-- <el-transfer  filterable :filter-method="filterMethod"  filter-placeholder="请输入搜索内容"  v-model="value2"   :data="data2">
                </el-transfer> -->
           </el-form-item>
           <el-form-item label="监测内容设备：" :label-width="formLabelWidth">

           </el-form-item>
           <el-form-item label="项目简介：" :label-width="formLabelWidth">
               <el-input  type="textarea"  :rows="3"  placeholder="请输入内容"  v-model="form.textarea" class="input-w-480"></el-input>
           </el-form-item>

        </el-form>
                <div slot="footer" class="">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
                </div>
        </el-dialog>

</el-col>
    </section>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      options3: [{ value3: "one", label3: "111" }],
      options4: [{ value4: "one", label4: "111" }],
      tableData: [{ data: "时间", name: "名字" }],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      formoptions: [{ formvalue: "第一个", formlabel: "111" }],
      formoptions1: [{ formvalue: "第一个", formlabel: "111" }],
      form: {
        name: "",
        username: "",
        value1: "",
        value: "",
        startdata: "",
        enddata: "",
        textarea: ""
      },
    }
  },
  
}
</script>

<style >
.content {
  padding-top: 20px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.table {
  margin-top: 10px;
  margin-left: 10px;
  width: auto;
  margin-right: 10px;
}
.input-w-480 {
  width: 480px;
}
</style>